<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="setBtn">新增</button>
    <button class="getBtn">获取</button>
    <button class="editBtn">修改</button>
    <button class="delBtn">删除</button>
</body>
<script type="module">
    import { setCookie, getCookie } from "../js/cookie.js";

    var setBtn = document.getElementsByClassName("setBtn")[0];
    var getBtn = document.getElementsByClassName("getBtn")[0];
    var editBtn = document.getElementsByClassName("editBtn")[0];
    var delBtn = document.getElementsByClassName("delBtn")[0];

    setBtn.onclick = function () {
        setCookie("user", "a123123", 31 * 24 * 60 * 60);
        setCookie("pwd", "123123");
        setCookie("phone", "17386141517", 7 * 24 * 60 * 60);
        setCookie("email", "123123@qq.com", 24 * 60 * 60);
    }


    getBtn.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("height"));
    }

    // cookie的修改 对应键名重新赋值
    editBtn.onclick = function () {
        setCookie("user", "b123123", 31 * 24 * 60 * 60);
        setCookie("pwd", "321321");
        setCookie("phone", "17386666666", 7 * 24 * 60 * 60);
        setCookie("email", "1321321@qq.com", 24 * 60 * 60);
    }

    // 默认情况下,cookie不设置过期时间,浏览器关闭过期  
    //           如果设置过期时间, 到达给定时间之后 过期

    // 注意: 过期的cookie,无法通过js获取,会在浏览器关闭或刷新页面时统一清除

    // 删除cookie -> 将cookie的过期时间设置为已经过去的时间
    // 1. 删除cookie时,将键值赋值为""
    // 2. 所有cookie删除之后 刷新页面(location.reload())
    delBtn.onclick = function () {
        setCookie("user", "", -1);
        setCookie("pwd", "", -1);
        setCookie("phone", "", -1);
        setCookie("email", "", -1);
        location.reload();
    }

</script>

</html>